<template>
	<view class="work-detail-page page" :style="!disabled||(detail.process_status==2&&detail.is_comments==0)?'padding-bottom:150rpx':''">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="我的零活详情"></CustomNav>
		<view class="info-block block" :style="'margin-top:'+mt">
			<view class="head-info">
				<view class="work-type">{{valuationText.name}}</view>
				<view class="work-name">{{detail.name}}</view>
				<view class="btn-block" style="justify-content: flex-end;">
					<!-- <image @click="collectWork" :src="collect" class="btn-item"></image>
					<image src="/static/image/report.png" class="btn-item"></image> -->
					<button open-type="share" style="margin: 0;">
						<image src="/static/image/share.png" class="btn-item"></image>
					</button>
				</view>
			</view>
			<view class="start-time">开工日期：{{detail.start_time_text}}</view>
			<view class="label-block">
				<view class="label-item">{{detail.population}}人</view>
				<view class="label-item">{{detail.duration}}{{detail.unit_text}}</view>
				<view class="price">{{detail.price}}{{detail.price_text}}</view>
			</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">工作地点</view>
			<view class="position-block">
				<view class="position">{{detail.address}}</view>
				<view @click="openNavigate" class="navigation">
					<view class="iconfont icon-daohang"></view>导航
				</view>
			</view>
		</view>
		<view class="info-block block">
			<view class="title">工作描述</view>
			<view class="describe">{{detail.describe}}</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">联系电话</view>
			<view class="contact">
				<template v-if="detail.user">
					<view class="contact-name">{{detail.user.name | filterRealName}}</view>
					<view class="contact-phone">{{detail.user.phone_number | filterPhone}}</view>
					<view @click="callPhone" class="call">
						<view class="iconfont icon-24gf-telephone"></view>拨打
					</view>
				</template>
				<view v-else class="empty">暂无联系方式</view>
			</view>
		</view>
		<view class="info-block block">
			<view class="title">工作环境及操作规范</view>
			<view class="image-block">
				<template v-if="detail.attachment.length>0">
					<image @click="viewImage(item)" v-for="(item,index) in detail.attachment" :key="index" class="image-item" mode="aspectFill" :src="item"></image>
				</template>
				<view v-else class="empty">暂无图片</view>
			</view>
		</view>
		<view @click="navigate('/page_other/department/detail?id='+detail.department.id)" class="info-block block" style="margin: 30rpx auto;display: flex;align-items: center;" v-if="detail.department">
			<image :src="detail.department.logo" class="company-photo"></image>
			<view class="company-info">
				<view class="company-name">{{detail.department?detail.department.name:''}}</view>
				<view class="evaluate">用工方评分 {{detail.department.employer_score||'暂无评分'}} · 零工方评分 {{detail.department.workers_score||'暂无评分'}}</view>
			</view>
			<view class="iconfont icon-arrow-right"></view>
		</view>
		<view class="title FZHZGBJ" style="margin-top: 30rpx;">申请零工列表（{{detail.work_rob.length}}/{{detail.population}}）</view>
		<view v-if="detail.work_rob.length>0"  class="apply-list">
			<view @click="navigate('/page_other/user/user_view?id='+item.user.id)" class="apply-item block" v-for="(item,index) in detail.work_rob" :key="index">
				<image class="user-photo" :src="item.user.avatar" mode="aspectFill"></image>
				<view class="info-block">
					<view class="name">{{item.user.name | filterRealName}}</view>
					<view class="score">评分：{{item.user.total_score||'暂无评分'}}</view>
				</view>
			</view>
		</view>
		<view v-else class="empty">暂无申请</view>
		<view class="bottom-btn-block">
			<view @click="submit" class="btn normal" v-if="!disabled">取消</view>
			<view @click="navigate('/page_other/evaluate/index?type=2&associated_id='+detail.department.id+'&work_id='+detail.id)" class="btn normal" v-if="detail.process_status==2&&detail.is_comments==0">评价</view>
		</view>
		
	</view>
</template>

<script>
	import {sendWorkDetail,cancelWork,applyList} from '@/api/work.js'
	export default{
		data(){
			return{
				id:null,
				topBgColor: 'rgba(0,0,0,0)',
				detail:{
					department:{logo:'',name:''},
					name:'',
					population:0,
					duration:0,
					price:0,
					price_text:'',
					address:'',
					describe:'',
					employer_score:0,
					workers_score:0,
					start_time_text:'',
					attachment:[],
					is_cancel:0,//1可取消 0不可取消
					work_rob:[],
					is_comments:0,
				},
				disabled:false,
			}
		},
		computed:{
			valuationText(){
				let obj={}
				switch(this.detail.valuation){
					case 1:
						obj={name:'短期工',unit:'元/天'};
						break;
					case 2:
						obj={name:'小时工',unit:'元/时'};
						break;
					case 3:
						obj={name:'计件工',unit:'元/100件'};
						break;
					default:
						obj={name:'短期工',unit:'元/天'};
				}
				return obj
			}
		},
		methods:{
			viewImage(url){
				uni.previewImage({
					current:url,
					urls:this.detail.attachment
				})
			},
			openNavigate(){
				uni.openLocation({
					latitude:this.detail.latitude*1,
					longitude:this.detail.longitude*1,
					name:this.detail.address
				})
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.detail.user.phone_number
				})
			},
			getDetail(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				sendWorkDetail(this.id).then(res=>{
					//res.attachment=res.attachment?res.attachment.split(','):[];
					this.disabled=res.is_cancel==0?true:false
					this.detail=res;
				}).catch(()=>{
					this.showToast('加载失败');
				})
			},
			submit(){
				if(this.disabled){
					this.showToast('该零活不可取消');
					return;
				}
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				cancelWork({work_id:this.detail.id}).then(()=>{
					this.disabled=true
					this.showToast('取消成功')
				}).catch(()=>{
					uni.switchTab({
						url:'/pages/mine/index'
					})
				})
			}
		},
		onUnload() {
			uni.$off('completeComments')
		},
		onLoad(option) {
			this.id=option.id
			this.getDetail()
			uni.$on('completeComments',()=>{
				this.getDetail();
			})
		},
	}
</script>

<style lang="scss" scoped>
	.work-detail-page {
		overflow: hidden;
	
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
	
		.block {
			width: $content-width;
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
		}
		.info-block{
			margin: 0 auto;
			.head-info{
				width: 100%;
				display: flex;
				.work-type{
					width: 100rpx;
					border-radius: 4px;
					color:#fa9b17;
					background: #fcf2d8;
					font-size: 24rpx;
					padding: 2px 7px;
					margin-right: 20rpx;
					text-align: center;
				}
				.work-name{
					width: calc(100% - 280rpx);
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					margin-right: auto;
					font-weight: bold;
				}
				.btn-block{
					width:160rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn-item{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.start-time{
				color: #767676;
				font-size: 28rpx;
				margin: 30rpx 0;
			}
			.label-block{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.label-item{
					border-radius: 16px;
					background: #fff0d6;
					color: $orange-color;
					font-size: 24rpx;
					padding: 8rpx 26rpx;
					margin-right: 20rpx;
				}
				.price{
					font-weight: bold;
					font-size: 28rpx;
					margin-left: auto;
					color: $orange-color;
				}
			}
			.title{
				margin-bottom: 20rpx;
			}
			.position-block{
				display: flex;
				align-items: center;
				width: 100%;
				.position{
					width: calc(100% - 140rpx);
					margin-right: 20rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.navigation{
					border-radius: 16px;
					border: 1px solid #333;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 50rpx;
					font-size: 28rpx;
					.iconfont{
						font-size: 34rpx;
					}
				}
			}
			.describe{
				line-height: 2;
			}
			.contact{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.contact-phone{
					width: 240rpx;
					margin-right: auto;
					margin-left: 20rpx;
					color: $orange-color;
				}
				.call{
					border-radius: 16px;
					border: 1px solid #333;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 50rpx;
					font-size: 28rpx;
					.iconfont{
						font-size: 34rpx;
					}
				}
			}
			.image-block{
				display: flex;
				flex-wrap: wrap;
				.image-item{
					width: calc((100% - 60rpx)/3);
					height: 200rpx;
					border-radius: 8px;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}
				.image-item:nth-child(3n){
					margin-right: 0;
				}
			}
			.company-photo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.company-info{
				width: calc(100% - 160rpx);
				display: flex;
				flex-direction: column;
				justify-content: center;
				.company-name{
					width: 100%;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.evaluate{
					color: #767676;
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
			.icon-arrow-right{
				color: #999;
			}
		}
		.bottom-btn-block{
			display: flex;
			justify-content: center;
			position: fixed;
			transform: translate(-50%,-50%);
			left: 50%;
			bottom: 0;
			.btn{
				margin: 0 20rpx;
			}
		}
		.apply-list,.title{
			width: $content-width;
			margin: 0 auto;
		}
		.apply-list{
			margin: 30rpx auto;
			.apply-item{
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				.user-photo{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.info-block{
					width: calc(100% - 150rpx);
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.score{
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #767676;
					}
				}
			}
		}
	}
</style>